<script setup lang="ts">
import {onMounted, ref, reactive, onBeforeMount} from "vue";
import request from "@/utils/request.ts"
import {ElMessage} from "element-plus";
import getFile from "@/utils/getFileUrl.ts";
import {router} from "@/router/router"

let movieList8=ref([]) //8部电影两行展示
let movieList5=ref([]) //今日票房根据播放量排列列出的5个电影
// let firstMovie=movieList5.value[0];//单独获取播放量第一的电影
// let movieList4=ref(movieList5.value.shift());//将播放量第一的电影删除之后的列表
onBeforeMount(()=>{
  //在页面渲染完毕之后，访问后端获取电影数据
  request.get("/getMovie")
  .then(response=>{
    //response.data为后端返回的数据
    movieList8.value=response.data.movieList8;
    movieList5.value=response.data.movieList5;
  })
  .catch(error=>{
    ElMessage.error(error)
  })
})
function goDetails(movie){
// window.open(router.resolve({path:"/details", query:{movieId:movie.movieId}}).href)
  window.open(router.resolve({path:"/details", query:{movie:JSON.stringify(movie)}}).href)
}
</script>

<template>
<!--  html标签写在此处-->
  <div class="content">
    <div class="hotPlay">
      <div class="HotPlayTitle">
        <span >正在热映（60部）</span>
        <span>全部</span>
      </div>
      <div class="HotPlayList">
        <div @click="goDetails(movie)" v-for="(movie, index) in movieList8" :key="index" class="movie">
          <div class="movieInfo">
            <img :src="`/src/assets/img/${movie.movieImg}`" style="width: 100%; height:100%;">

            <div class="movieName myFlex-x">
              {{movie.movieName}}
            </div>
          </div>
          <div class="ticket myFlex-x">购票</div>
        </div>

      </div>

    </div>
    <div class="todayTicket">
      <div class="todayTicketTitle">
        今日票房
      </div>
      <div class="todayTicketMovieList">
        <div v-if="movieList5.length > 0" class="playNumberTopOne myFlex" style="display: flex; justify-content: space-between; align-items: center; width: 100%">
          <img  :src="'/src/assets/img/'+movieList5[0].movieImg" style="width: 30%; height:100%">
          <div class="topOneInfo">
            <span style="font-size:20px;">{{movieList5[0].movieName}}</span>
            <span style="color:red">{{movieList5[0].playNumber}}万</span>
          </div>
        </div>
        <div class="everyMovie"  v-for="(movie,index) in movieList5.slice(1,5)" :key="index">
          <span style="font-size:17px">{{ movie.movieName }}</span>
          <span style="color:red">{{ movie.playNumber }}</span>
        </div>

      </div>
      <div class="todayPan">
        <div class="pan">今日大盘</div>
        <div class="panInfo">
          <div class="mainData">
            <span class="dataValue">2319.2万</span>
          </div>
          <div class="auxiliaryInfo">
            <span>北京时间 10:37:23 猫眼专业版实时票房数据</span>
          </div>
          <!-- 查看更多链接 -->
          <div class="moreLink">
            <a href="#">查看更多 &gt;</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/*当前页面的css*/
@import "@/assets/css/content.css";
</style>